<template>
	<view class="liveModule">
		<view class="liveTopbar">
			<input type="text" value="" placeholder="输入关键字查询" />
			<image src="../../images/fangdajing.png" mode=""></image>
		</view>
		<view class="liveCont">
			<view class="nav">
						<view class="flex_between">
							<view class="nav_title">
								<view :class="{'active':isActive==1}" @click="chenked(1)">
									官方直播
								</view>
							</view>
							<view class="nav_title">
								<view :class="{'active':isActive==2}" @click="chenked(2)">
									展商直播
								</view>
							</view>
						</view>
					</view>
					<view class="navDate">		
						<view class="ndItem" v-for="(item,index) in arr1" :key="index">
							<view :class="Active==index?'active':''" @click="btn(index)">
								<text class="itemDate">{{item.top}}</text>
								<text class="itemWeekday">{{item.bottom}}</text>
							</view>
						</view>
					</view>
					<!-- nav-item -->
					<view class="nav_item" v-if="isActive==1">
						<view class="zbList">
							<view class="zbItem" v-for="(item,index) in list" :key="index">
								<text class="zbLogo" :style="{'background':' #'+item.bg}">{{item.logo}}</text>
								<image :src="item.url" mode=""></image>
								<view class="zbText">
									<text class="zbTit">{{item.tit}}</text>
									<text class="zbTime">{{item.time}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="nav_item" v-if="isActive==2">
						<view class="zbList">
							<view class="zbItem" v-for="(item,index) in list1" :key="index">
								<text class="zbLogo" :style="{'background':' #'+item.bg}">{{item.logo}}</text>
								<image :src="item.url" mode=""></image>
								<view class="zbText">
									<text class="zbTit">{{item.tit}}</text>
									<text class="zbTime">{{item.time}}</text>
								</view>
							</view>
						</view>
					</view>
		
		</view>
	</view>
</template>

<script>
	let arr =[];
	for (var i = 0; i < 7; i++) {
	  arr.push(getDay(i))
	}
	
	console.log(arr)
	
	function getDay(day) {
	  //Date()返回当日的日期和时间。
	  var days = new Date();
	  //getTime()返回 1970 年 1 月 1 日至今的毫秒数。
	  var gettimes = days.getTime() + 1000 * 60 * 60 * 24 * day;
	  //setTime()以毫秒设置 Date 对象。
	  days.setTime(gettimes);
	  var year = days.getFullYear();
	  var month = days.getMonth() + 1;
	  if (month < 10) {
	    month = '0' + month;
	  }
	  var today = days.getDate();
	  if (today < 10) {
	    today = '0' + today;
	  }
	
	  var week = days.getDay();
	  var weekArray = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
	  // return month + '.' + today + '-' + '-' +  weekArray[week];
	  return { top: month + '.' + today, bottom: weekArray[week] }
	}
	export default {
			data() {
				return {
					isActive:1,
					Active:0,
					list:[
						{
							logo:'预告',
							bg:'4585ed',
							url:require("../../images/img6.webp"),
							tit:'横向宣传推介 跨域交流协作推介会',
							time:'10:00-12:00'
						},
						{
							logo:'直播中',
							bg:'fa5c52',
							url:require("../../images/img8.webp"),
							tit:'横向宣传推介 跨域交流协作推介会',
							time:'10:00-12:00'
						},
						{
							logo:'直播中',
							bg:'fa5c52',
							url:require("../../images/img9.webp"),
							tit:'横向宣传推介 跨域交流协作推介会',
							time:'10:00-12:00'
						},
						{
							logo:'直播中',
							bg:'fa5c52',
							url:require("../../images/img10.webp"),
							tit:'横向宣传推介 跨域交流协作推介会',
							time:'10:00-12:00'
						},
						{
							logo:'直播中',
							bg:'fa5c52',
							url:require("../../images/img11.webp"),
							tit:'横向宣传推介 跨域交流协作推介会',
							time:'10:00-12:00'
						},
						{
							logo:'直播中',
							bg:'fa5c52',
							url:require("../../images/img1.webp"),
							tit:'横向宣传推介 跨域交流协作推介会',
							time:'10:00-12:00'
						},
						
					],
</script>

<style lang="scss" scoped>
	.warehousingToBeCon {
		width: 100%;

		.nav {
			border-top: 1rpx solid #f2f2f2;
			background-color: #fff;
			border-radius: 25px;
			width: 100%;

			.flex_between {
				display: flex;

				.nav_title {
					height: 88rpx;
					line-height: 88rpx;
					width: 100%;
					text-align: center;
					font-size: 32rpx;
					font-family: "PingFang";
					color: rgb(102, 102, 102);
				}
			}
		}
	}

	.active1 {
		position: relative;
		color: #276bff;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;

	}
	
	.ss1{
		border-radius: 15px;
		padding: 5px;
		padding-left: 15px;
		background: #fff;
		border: 1px solid ;
		width:90%;
		margin: 0 auto;
		margin: 2%;
		
		}
		.ss image{
			position: absolute;
			width: 25px;
			right: 20px;
			top: 12px;
			height: 25px;
			z-index: 100;
		}
		.ss{
			width: 100%;
			height: 70px;
			padding: 10px;
			display: flex;
			position: relative;
			margin: 5px;
			background: url(../lb/img/bgup2.jpg);
		}
		.navDate{
		  padding: 0 30rpx 30rpx 30rpx;
		  display: flex;
		  justify-content: space-around;
		}
		.ndItem{
			width: 92rpx;
			height: 92rpx;
			border-radius: 15rpx;
			
		}
		.ndItem>view{
			background: #f6f6f6;
			color: #7e7e7e;
			border-radius: 15rpx;
			width: 92rpx;
			height: 100rpx;
			padding: 15rpx 0 10rpx 0;
			display: flex;
			flex-wrap: wrap;
		}
		.ndItem text{
			display: block;
			width: 100%;
			text-align: center;
		}
		.ndItem .active{
			color: #fff;
			background: #0956F0;
		}
		.itemDate{
			font-size: 16rpx;
		}
		.itemWeekday{
			font-size: 24rpx;
		}
</style>
